.transfrom-class {
  transition: 0.75s;
}
.font-style {
  font-size: 24px;
  color: white;
}
.middle-box {
  width: 100%;
  transition: 0.75s;
}
.middle-box .middel-box-item {
  position: relative;
  height: calc((100vh - 180px) / 8);
  line-height: calc((100vh - 180px) / 8);
  display: flex;
  justify-content: flex-end;
  font-size: 24px;
  color: white;
}
.middle-box .middel-box-item-yellow1 {
  background-color: rgba(219, 142, 99, 0.8);
}
.middle-box .middel-box-item-yellow2 {
  background-color: rgba(222, 132, 57, 0.8);
}
.middle-box .middel-box-item-yellow3 {
  background-color: rgba(225, 135, 65, 0.8);
}
.middle-box .middel-box-item-yellow4 {
  background-color: rgba(243, 181, 97, 0.8);
}
.middle-box .middel-box-item-yellow5 {
  background-color: rgba(246, 197, 139, 0.8);
}
.middle-box .middel-box-item-yellow6 {
  background-color: rgba(248, 192, 82, 0.9);
}
.middle-box .middel-box-item-yellow7 {
  background-color: rgba(250, 163, 102, 0.9);
}
.middle-box .middel-box-item-yellow8 {
  background-color: rgba(247, 153, 79, 0.5);
}
.middle-box .middel-box-inner {
  height: calc((100vh - 180px) / 8);
}
.middle-box .middel-box-inner span {
  margin-left: 20px;
  margin-right: 24px;
}
.middle-box .middel-box-inner-yellow1 {
  width: 65%;
  background-color: rgba(246, 171, 101, 0.6);
}
.middle-box .middel-box-inner-yellow2 {
  width: 53%;
  background-color: rgba(245, 174, 63, 0.8);
}
.middle-box .middel-box-inner-yellow3 {
  width: 43%;
  background-color: rgba(245, 187, 81, 0.8);
}
.middle-box .middel-box-inner-yellow4 {
  width: 35%;
  background-color: rgba(249, 189, 81, 0.8);
}
.middle-box .middel-box-inner-yellow5 {
  width: 43%;
}
.middle-box .middel-box-inner-yellow6 {
  width: 50%;
  position: absolute;
  left: 0;
  padding-left: 50%;
  background-color: rgba(247, 193, 69, 0.9);
}
.middle-box .middel-box-inner-yellow7 {
  width: 60%;
  position: absolute;
  left: 0;
  padding-left: 35%;
  background-color: rgba(231, 151, 89, 0.9);
}
.middle-box .middel-box-inner-yellow8 {
  width: 60%;
  position: absolute;
  left: 0;
  padding-left: 15%;
  background-color: rgba(228, 164, 77, 0.8);
}
